// 样式-数据-默认值
import React from 'react';
import { Input, Radio, InputNumber } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { CUSTOM_CODE, ALL_CODE, FIRST_CODE, LAST_CODE } from './EnumConfig';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	type: string;
}

// const CUSTOM_CODE = 'custom';

const DefaultValue = ( props: IProps ) => {
	const { type, config, onValuesChange, form } = props;
	const {
		defaultValueSingle,
		defaultValueDate,
		defaultValueDaterange,
		defaultValueDatarange,
		defaultValueMul,
	} = config.data;

	const onBlur = ( value: any, name: string ) => {
		console.log( 'deaf', form.getFieldsValue()[name] );
		onValuesChange( config.type, config.key, { [name]: form.getFieldsValue()[name] }, 'data' );
	};

	return (
		<>
			{type === 'defaultValueSingle' && (
				<>
					<FormItem label="默认值" name="defaultValueSingle">
						<Radio.Group>
							<Radio value={FIRST_CODE}>第一项</Radio>
							<Radio value={LAST_CODE}>最后一项</Radio>
							<Radio value={CUSTOM_CODE}>自定义</Radio>
						</Radio.Group>
					</FormItem>
					{defaultValueSingle === CUSTOM_CODE && (
						<FormItem label="" name="defaultValueCustom">
							<Input
								onBlur={( value ) => onBlur( value, 'defaultValueCustom' )}
								onPressEnter={( value ) => onBlur( value, 'defaultValueCustom' )}
								placeholder="请输入取值"
							/>
						</FormItem>
					)}
				</>
			)}
			{type === 'defaultValueMul' && (
				<>
					<FormItem label="默认值" name="defaultValueMul">
						<Radio.Group>
							<Radio value={FIRST_CODE}>第一项</Radio>
							<Radio value={LAST_CODE}>最后一项</Radio>
							<Radio value={ALL_CODE}>全部</Radio>
							<Radio value={CUSTOM_CODE}>自定义</Radio>
						</Radio.Group>
					</FormItem>
					{defaultValueMul === CUSTOM_CODE && (
						<FormItem label="" name="defaultValueCustom">
							<Input
								onBlur={( value ) => onBlur( value, 'defaultValueCustom' )}
								onPressEnter={( value ) => onBlur( value, 'defaultValueCustom' )}
								placeholder="请输入取值"
							/>
						</FormItem>
					)}
				</>
			)}
			{type === 'defaultValueDate' && (
				<>
					<FormItem label="默认值" name="defaultValueDate">
						<Radio.Group>
							<Radio value={FIRST_CODE}>第一天</Radio>
							<Radio value={LAST_CODE}>最后一天</Radio>
							<Radio value={CUSTOM_CODE}>自定义</Radio>
						</Radio.Group>
					</FormItem>
					{defaultValueDate === CUSTOM_CODE && (
						<FormItem label="" name="defaultValueCustom">
							<Input
								onBlur={( value ) => onBlur( value, 'defaultValueCustom' )}
								onPressEnter={( value ) => onBlur( value, 'defaultValueCustom' )}
								placeholder="请输入取值"
							/>
						</FormItem>
					)}
				</>
			)}
			{type === 'defaultValueDaterange' && (
				<>
					<FormItem label="默认值" name="defaultValueDaterange">
						<Radio.Group>
							<Radio value={ALL_CODE}>全部</Radio>
							<Radio value={CUSTOM_CODE}>自定义</Radio>
						</Radio.Group>
					</FormItem>
					{defaultValueDaterange === CUSTOM_CODE && (
						<>
							<FormItem style={{ marginBottom: '0' }} label="" name="defaultValueCustomStart">
								<Input
									onBlur={( value ) => onBlur( value, 'defaultValueCustomStart' )}
									onPressEnter={( value ) => onBlur( value, 'defaultValueCustomStart' )}
									placeholder="大于"
								/>
							</FormItem>
							<span style={{ margin: '5px 0' }}>至</span>
							<FormItem label="" name="defaultValueCustomEnd">
								<Input
									onBlur={( value ) => onBlur( value, 'defaultValueCustomEnd' )}
									onPressEnter={( value ) => onBlur( value, 'defaultValueCustomEnd' )}
									placeholder="小于"
								/>
							</FormItem>
						</>
					)}
				</>
			)}
			{type === 'defaultValueDatarange' && (
				<>
					<FormItem label="默认值" name="defaultValueDatarange">
						<Radio.Group>
							<Radio value={ALL_CODE}>全部</Radio>
							<Radio value={CUSTOM_CODE}>自定义</Radio>
						</Radio.Group>
					</FormItem>
					{defaultValueDatarange === CUSTOM_CODE && (
						<>
							<FormItem style={{ marginBottom: '0' }} label="" name="defaultValueCustomStart">
								<InputNumber
									onBlur={( value ) => onBlur( value, 'defaultValueCustomStart' )}
									onPressEnter={( value ) => onBlur( value, 'defaultValueCustomStart' )}
									placeholder="小于"
								/>
							</FormItem>
							<span style={{ margin: '5px 0' }}>至</span>
							<FormItem label="" name="defaultValueCustomEnd">
								<InputNumber
									onBlur={( value ) => onBlur( value, 'defaultValueCustomEnd' )}
									onPressEnter={( value ) => onBlur( value, 'defaultValueCustomEnd' )}
									placeholder="小于"
								/>
							</FormItem>
						</>
					)}
				</>
			)}
		</>
	);
};

export default React.memo( DefaultValue );
